<template>
	<view class="warp">
		<view class="information">
			<view class="information-item" v-for="(e,i) in list" :key="i" @click="informatClick">
				<view class="information-left">
					<image :src="e.icon"></image>
					<view class="information-title">
						<view class="name">
							{{ e.name }}
						</view>
						<view class="center">
							{{ e.center }}
						</view>
					</view>
				</view>
				<view class="time">
					1500
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					icon: 'https://scpic1.chinaz.net/Files/pic/pic9/202205/apic41054_s.jpg',
					name: '昵称',
					center: '谢谢惠顾'
				}, {
					icon: 'https://scpic2.chinaz.net/Files/pic/pic9/202205/apic41055_s.jpg',
					name: '昵称',
					center: '谢谢惠顾'
				}, {
					icon: 'https://scpic1.chinaz.net/Files/pic/pic9/202205/apic41125_s.jpg',
					name: '昵称',
					center: '谢谢惠顾'
				}, ]
			};
		},
		methods: {
			informatClick() {
				uni.navigateTo({
					url: './messageDetails'
				})
			}
		}
	}
</script>

<style lang="scss">
	.warp {
		min-height: 100vh;

		.information {
			.information-item {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 20rpx 20rpx;
				border-bottom: 1rpx solid #f9f8fb;

				.information-left {
					display: flex;
					align-items: center;

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}

					.information-title {
						font-size: 24rpx;
						padding-left: 20rpx;

						.center {
							padding-top: 10rpx;
							color: #aaa;
						}
					}
				}

				.time {
					color: #aaa;
				}
			}
		}
	}
</style>
